<template>
  <a-modal
    :title="title"
    :width="650"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :destroyOnClose="true"
    :centered="true"
    @ok="submit"
    @cancel="cancel"
  >
    <a-form :form="form">
      <a-form-item
        label="选择类型"
        :label-col="labelCol"
        :wrapper-col="wrapperCol">
        <a-radio-group
          v-decorator="['type', {initialValue:1,rules: [{required: true}]}]"
        >
          <a-radio :value="1">去除某字符前内容</a-radio>
          <a-radio :value="2">尾部增加字符</a-radio>
          <a-radio :value="3">去除指定字符</a-radio>
          <a-radio :value="4">替换指定字符</a-radio>
        </a-radio-group>
      </a-form-item>

      <template v-if="form.getFieldValue('type')===4">
        <a-form-item
          label="被替换字符"
          :label-col="labelCol"
          :wrapper-col="wrapperCol">
          <a-input
            v-decorator="['content', {rules: [{required: true, message: '请输入被替换字符'}]}]"
            placeholder="请输入被替换字符"
            allowClear
          />
        </a-form-item>
        <a-form-item
          label="替换成字符"
          :label-col="labelCol"
          :wrapper-col="wrapperCol">
          <a-input
            v-decorator="['content2', {rules: [{required: true, message: '请输入替换成字符'}]}]"
            placeholder="请输入替换成字符"
            allowClear
          />
        </a-form-item>
      </template>
      <template v-else>
        <a-form-item
          label="字符"
          :label-col="labelCol"
          :wrapper-col="wrapperCol">
          <a-input
            v-decorator="['content', {rules: [{required: true, message: '请输入要被去除 / 替换的字符'}]}]"
            placeholder="请输入要被去除 / 替换的字符"
            allowClear
          />
        </a-form-item>
      </template>

    </a-form>
  </a-modal>
</template>

<script>

export default {
  name: 'EditTitle',
  data () {
    return {
      title: '题目标题编辑',
      // 标签布局属性
      labelCol: {
        span: 4
      },
      // 输入框布局属性
      wrapperCol: {
        span: 20
      },
      visible: false,
      confirmLoading: false,

      form: this.$form.createForm(this),

      loading: false,
      data: []
    }
  },
  methods: {
    open (data) {
      this.data = data
      this.visible = true
    },
    submit (e) {
      e.preventDefault()
      const { form: { validateFields } } = this
      // 表单验证
      validateFields((errors, values) => {
        // 提交到后端api
        !errors && this.save(values)
      })
    },
    async save (values) {
      console.log(values)
      console.log(this.data)
      var content
      switch (values.type) {
        case 1:
          content = await this.titleFirstStr(values.content)
          break
        case 2:
          content = await this.titleLastStr(values.content)
          break
        case 3:
          content = await this.titleDeleteStr(values.content)
          break
        case 4:
          content = await this.titleReplaceStr(values.content, values.content2)
          break
        default:
      }
      this.$emit('success', content)
      this.$message.success('操作成功')
      this.cancel()
    },
    async titleFirstStr (value) {
      var content = ''
      this.data.forEach((v, i) => {
        if (i > 0) {
          content += '\n'
        }
        var title = v.title + '\n'

        var new_title = title.split(value)
        content += new_title[1] ? new_title[1] : new_title[0]
        v.qt_item.forEach((c) => {
          content += c.value + '\n'
        })
      })
      return content
    },
    async titleLastStr (value) {
      var content = ''
      this.data.forEach((v, i) => {
        if (i > 0) {
          content += '\n'
        }
        var title = v.title + value + '\n'
        content += title
        v.qt_item.forEach((c) => {
          content += c.value + '\n'
        })
      })
      return content
    },
    async titleDeleteStr (value) {
      var content = ''
      this.data.forEach((v, i) => {
        if (i > 0) {
          content += '\n'
        }
        var title = v.title
        var new_title = title.replace(value, '') + '\n'
        content += new_title
        v.qt_item.forEach((c) => {
          content += c.value + '\n'
        })
      })
      return content
    },
    async titleReplaceStr (value, value2) {
      var content = ''
      this.data.forEach((v, i) => {
        if (i > 0) {
          content += '\n'
        }
        var title = v.title
        var new_title = title.replace(value, value2) + '\n'
        content += new_title
        v.qt_item.forEach((c) => {
          content += c.value + '\n'
        })
      })
      return content
    },
    cancel () {
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>
